import React from "react";
import { Table, Tag, Button } from "antd";
import { withRouter } from "react-router-dom";
import "./CollectTable.css";

interface CollectTableProps {
  data: any[];
  history: any;
}

const CollectTable: React.FC<CollectTableProps> = ({ data, history }) => {
  // 定义表格样式
  const columns = [
    {
      title: "房屋图片",
      dataIndex: "src",
      width: 120,
      render: (src:any) => (
        <div style={{ textAlign: "center" }}>
          <img
            src={(() => {
              // 确保src是字符串
              if (typeof src === 'string' && src) {
                // API返回的图片路径是相对路径，需要添加基础URL
                if (src.startsWith('/')) {
                  // 如果是/neImg/开头的相对路径，添加基础URL
                  if (src.startsWith('/neImg/')) {
                    return `http://localhost:8080${src}`;
                  }
                  return src;
                }
                return src;
              }
              return `/1.jpg`;
            })()}
            style={{
              width: "90px",
              height: "60px",
              objectFit: "cover",
              border: "1px solid #f0f0f0",
              display: "block",
              margin: "0 auto"
            }}
            alt="房屋图片"
            onError={(e) => {
              e.currentTarget.src = "/1.jpg";
            }}
          />
        </div>
      ),
    },
    {
      title: "标题",
      dataIndex: "title",
      render: (text:any) => (
        <div style={{ lineHeight: "1.4", fontSize: "14px" }}>{text}</div>
      ),
    },
    {
      title: "描述",
      dataIndex: "description",
      render: (text:any) => (
        <div style={{ lineHeight: "1.4", fontSize: "14px", color: "#666" }}>
          {text}
        </div>
      ),
    },
    {
      title: "价格",
      dataIndex: "price",
      render: (price:any) => (
        <div
          style={{
            lineHeight: "1.4",
            fontSize: "14px",
            color: "#ff4d4f",
            fontWeight: "500",
          }}
        >
          {price}
        </div>
      ),
    },
    {
      title: "标签",
      dataIndex: "tags",
      render: (tags:any) => (
        <div>
          {tags?.map((tag:any, index:any) => (
            <Tag
              key={index}
              style={{
                marginRight: "6px",
                marginBottom: "2px",
                backgroundColor: "#f6ffed",
                borderColor: "#b7eb8f",
                color: "#389e0d",
                fontSize: "12px",
                padding: "0 8px",
              }}
            >
              {tag}
            </Tag>
          ))}
        </div>
      ),
    },
    {title: "操作",
              render: (_, record:any) => (
                <Button
                  type="primary"
                  size="small"
                  style={{
                    backgroundColor: "#1890ff",
                    borderColor: "#1890ff",
                    fontSize: "12px",
                    padding: "4px 15px",
                  }}
                  onClick={() => history.push(`/details/${record.id || record.key}`)}
                >
                  查看详情
                </Button>
              ),
            },
  ];

  return (
    <div>
      <Table
        columns={columns}
        dataSource={data}
        rowKey={"key"}
        pagination={false}
        size="middle"
        scroll={{ x: "max-content" }}
      />
    </div>
  );
};
export default withRouter(CollectTable);
